<template>
  <div>
    <nav-header></nav-header>
    <nav-bread>
      <span slot="bread">Goods</span>
    </nav-bread>
    <div class="accessory-result-page accessory-page">
      <div class="container">
        <div class="filter-nav">
          <span class="sortby">Sort by:</span>
          <a href="javascript:void(0)" class="default cur">Default</a>
          <a href="javascript:void(0)" class="price" @click="sortGoods">Price
            <svg class="icon-arrow-short">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-short"></use>
            </svg>
          </a>
          <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterPop">Filter by</a>
        </div>
        <div class="accessory-result">
          <!-- filter -->
          <div class="filter stopPop" id="filter" :class="filterBy?'filterby-show':''">
            <dl class="filter-price">
              <dt>Price:</dt>
              <dd>
                <a href="javascript:void(0)"
                   :class="priceChecked=='all'?'cur':''"
                   @click="setPriceFilter('all')">
                  All
                </a>
              </dd>
              <dd v-for="(price,index) in priceFilter"
                  @click="setPriceFilter(index)">
                <a href="javascript:void(0)"
                   :class="priceChecked==index?'cur':''">
                  {{price.startPrice}} - {{price.endPrice}}
                </a>
              </dd>
            </dl>
          </div>

          <!-- search result accessories list -->
          <div class="accessory-list-wrap">
            <div class="accessory-list col-4">
              <ul>
                <li v-for="(item,index) in goodsList">
                  <div class="pic">
                    <a href="#"><img v-lazy="'/static/images/'+item.goodsImg" alt="产品展示图片"></a>
                  </div>
                  <div class="main">
                    <div class="name">{{item.goodsName}}</div>
                    <div class="price">{{item.goodsPrice}}</div>
                    <div class="btn-area">
                      <a href="javascript:;" class="btn btn--m" @click="addCart(item.goodsId)">加入购物车</a>
                    </div>
                  </div>
                </li>
              </ul>
              <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
                <img src="/static/images/loading/loading-spinning-bubbles.svg" v-show="loading"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="md-overlay" v-show="overLayFlag" @click="closePop"></div>
    <!--权限弹窗-->
    <modal :mdShow='mdShow' @close="closeModal">
      <p slot="message">
        请先登陆，否则无法加入购物车
      </p>
      <div slot="btnGroup">
        <a href="javascript:void(0)" class="btn btn--m" @click="mdShow=false">关闭</a>
      </div>
    </modal>
    <!--加入购物弹窗-->
    <modal :mdShow='mdShowCart' @close="closeModal">
      <p slot="message">
        <svg class="icon-status-ok">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-status-ok"></use>
        </svg>
        <span>加入购物车成功</span>
      </p>
      <div slot="btnGroup">
        <a href="javascript:void(0)" class="btn btn--m" @click="mdShowCart=false">继续购物</a>
        <router-link href="javascript:void(0)" class="btn btn--m" to="/cart">查看购物车</router-link>
      </div>
    </modal>
    <nav-footer></nav-footer>
  </div>
</template>

<script>
  import '@/assets/css/base.css'
  import '@/assets/css/product.css'

  import NavHeader from '@/components/NavHeader'
  import NavFooter from '@/components/NavFooter'
  import NavBread from '@/components/NavBread'
  import Modal from '@/components/Modal'

  import axios from 'axios'
  import qs from 'qs'

  export default {
    name: "GoodsList",
    data(){
      return{
        // 商品列表
        goodsList:[],
        // 排序规则
        sortFalg:true,
        // 页码
        page:1,
        // 每页展示数
        pageSize:4,
        priceFilter:[
          {
            startPrice:'0.00',
            endPrice:'500.00'
          },
          {
            startPrice:'500.00',
            endPrice:'1000.00'
          },
          {
            startPrice:'1000.00',
            endPrice:'1500.00'
          }
        ],
        priceChecked:'all',  // 过滤项选择
        filterBy:false,  // 是否弹出过滤
        overLayFlag:false,  // 是否开启遮罩
        busy: false,  // 控制加载
        loading: false,  // 控制分页加载样式
        mdShow:false,  // 是否弹出提示框
        mdShowCart:false  // 是否弹出购物车提示框
      }
    },
    components:{
      NavHeader,
      NavFooter,
      NavBread,
      Modal
    },
    mounted:function () {
      this.getGoodsList();
    },
    methods:{
      // 获取商品列表
      getGoodsList(flag){
        var param = {
          page : this.page,
          pageSize : this.pageSize,
          sort:this.sortFalg?1:-1,
          priceLevel:this.priceChecked
        };
        this.loading = true;
        axios.get("http://localhost:8081/goods/goodslist",{
          params:param
        }).then(
          (res)=>{
            this.loading = false;
            // 判断返回状态
            if (res.data.status==0) {
              // 如果是分页数据,是滚动
              if (flag) {
                this.goodsList = this.goodsList.concat(res.data.result);
                // 重新设置滚动请求
                if (res.data.result.length==0){
                  this.busy = true;
                }else {
                  this.busy = false;
                }
              }else {
                this.goodsList = res.data.result;
                this.busy = false;
              }
            }else {
              // 展示无结果提示
            }
          }
        )
      },
      // 显示隐藏
      showFilterPop(){
        this.filterBy = true;  // 是否弹出过滤
        this.overLayFlag = true;  // 是否开启遮罩
      },
      // 设置价格过滤
      setPriceFilter(index){
        this.priceChecked = index;
        this.page = 1;
        this.getGoodsList();
        this.closePop();
      },
      // 关闭隐藏
      closePop(){
        this.filterBy = false;  // 是否弹出过滤
        this.overLayFlag = false;  // 是否开启遮罩
      },
      // 排序请求
      sortGoods(){
        this.sortFalg = ! this.sortFalg;
        this.page = 1;
        this.getGoodsList();
      },
      // 滚动
      loadMore() {
        // 让滚动失活
        this.busy = true;
        setTimeout(() => {
          this.page++;
          this.getGoodsList(true);
        }, 1000);
      },
      // 加入购物车
      addCart(productId){
        axios.post('http://localhost:8081/goods/addcart',
          qs.stringify(
            { 'pId': productId },
            { indices: false }
          )
        ).then(
          (res)=>{
            // 判断返回状态
            if (res.data.status==0) {
              this.mdShowCart = true;
              this.$store.commit("updateCartCount",1);
            }else{
              this.mdShow = true;
            }
          }
        )
      },
      // 关闭弹窗
      closeModal(){
        this.mdShow = false;
        this.mdShowCart = false;
      }
    }
  }

</script>

<style scoped>

</style>
